.layout-archive,
.layout-tags {
	position: relative;
	padding: 3rem 0;

	.card {
		position: relative;
		display: -ms-flexbox;
		display: flex;
		padding: .5rem 0;
		border: 1px solid @light-border;
		border-radius: 4px;
		background-color: @white;
		background-clip: border-box;
		word-wrap: break-word;
		-webkit-transition: all .3s ease-out;
		-moz-transition: all .3s ease-out;
		-o-transition: all .3s ease-out;
		transition: all .3s ease-out;
		-ms-flex-direction: column;
		flex-direction: column;
		-ms-transition: all .3s ease-out;

		&:hover {
			box-shadow: 0px 10px 50px -15px rgba(0, 0, 0, 0.1);
		}

		&:not(:last-child) {
			margin-bottom: 3rem;
		}

		.card-header {
			padding: 1.5rem 1.25rem;
			border: 0;
			border-color: @main-border;
			background-color: transparent;
			background-clip: padding-box;

			.header-content {
				position: relative;
				padding-left: 1.5rem;

				&:before {
					position: absolute;
					left: 0;
					width: 4px;
					height: 100%;
					background-color: @main;
					content: "";
				}

				.title {
					font-size: 20px;
				}

				.sub {
					margin-top: .5rem;
					font-size: 12px;
					color: @light-black;
				}
			}
		}

		.card-body {
			position: relative;
			padding: 1rem 0;

			.card-item {
				position: relative;
				display: flex;
				flex-flow: row nowrap;
				align-items: center;
				padding: 0 1rem;

				&:not(:first-child) {
					.list-content {
						border-top: 1px solid @light-border;
					}
				}

				.thumb {
					position: relative;
					width: 48px;
					height: 48px;
					display: block;
					overflow: hidden;
					padding: 0;

					a {
						display: block;
						width: 100%;
						padding-bottom: 100%;
						border-radius: 50%;
						background-position: center;
						background-size: cover;
						background-repeat: no-repeat;
						background-color: @main-bg;
					}
				}

				.list-content {
					display: -ms-flexbox;
					display: flex;
					flex-flow: row nowrap;
					flex: 1 1 auto;
					align-items: center;
					margin-left: 1rem;
					padding: 1.5rem 0;

					.list-body {
						flex: 1 1 auto;

						&:hover {
							.title {
								color: @main;
							}
						}

						.title {
							font-size: 16px;
							color: @main-black;
						}

						.time {
							margin-top: .5rem;
							font-size: 12px;
							color: @light-black;
						}
					}
				}
			}
		}
	}
}